<template>
    <div>
        <div>
            <span>watch:</span>
            <div>{{ test1 }}</div>
            
        </div>
        <div>
            <span>computed:</span>
            <div>{{ test3 }}</div>
            <div>{{ save_test4 }}</div>
        </div>
        <div>
            <button @click="changeSome">dianwo</button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'watch_computed',
    data(){
        return{
            test1: 1,
            test2: 'test2',
            save_test4: 'test4'
        }
    },
    computed:{
        test3(){
            return 'test3:' + this.test1 * 2
        },
        test4:{
            set(newValue){
                // console.log(newValue)
                this.save_test4 = newValue
            },
            get(){
                return this.save_test4
            }
        }
    },
    mounted(){
        setTimeout(() => {
            this.changeSome()
        }, 1000);
    },
    methods:{
        changeSome(){
            this.test1++
            this.test4 = '123'
        }
    },
    watch:{
        test1(val, oldVal){
            console.log('test1 is change')
            console.log('val: ' + val)
            console.log('oldVal: ' + oldVal)
        }
    }
}
</script>

<style>

</style>
